<template>
	<view class="home">
		<view class="top-box">
			<text class="top-box-title">今日三餐推荐</text>
			<view class="top-box-contents">
				<view class="top-box-content">
					早餐
					<image :src="recommendFood.breakfirst.pictureUrl">{{ recommendFood.breakfirst.name }}</image>
				</view>
				<view class="top-box-content">
					午餐
					<image :src="recommendFood.dinner[0].pictureUrl">{{ recommendFood.dinner[0].name }}</image>
				</view>
				<view class="top-box-content">
					晚餐
					<image id="dinner" :src="recommendFood.dinner[1].pictureUrl">{{ recommendFood.dinner[1].name }}</image>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="bottom-title">
				附近商家
				<uni-icons type="list" size="22" color="#c3c3c3" @click="showFilter"></uni-icons>
			</view>
			<view class="bottom-list">
				<view v-for="(item, index) in restMsg" :key="index" @click="showDetails(item.id)">
					<infoCard :cardImg="item.pictureUrl" :restName="item.name" :gradeNum="item.score" :commentCount="item.commentCount"></infoCard>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import infoCard from '../../components/infoCard.vue';
	export default {
		components: {
			infoCard
		},
		data() {
			return {
				/**
				 * restMsg 数据结构为
				 * id
				 * name
				 * pictureUrl  -> 图片
				 * score  -> 打分的平均分
				 * commentCount   -> 评论总数
				 */
				restMsg: [],
				recommendFood: {
				}
			};
		},
		onLoad() {
			let that = this;
			uni.request({
				url: 'https://gljh.utools.club/food/get_recommend',
				method: 'GET',
				success: res => {
					if (res.data != null) {
						// console.log(res.data)
						that.recommendFood = res.data.data;
					}
				}
			});
			uni.request({
				url: 'https://gljh.utools.club/food/get_all_resturants',
				method: 'GET',
				success: res => {
					if (res.data != null) {
						console.log(res.data);
						that.restMsg = res.data.data;
					}
				}
			});
		},
		methods: {
			showFilter() {
				uni.navigateTo({
					url: './restFilter'
				});
			},
			showDetails(item) {
				// console.log(item)
				uni.navigateTo({
					url: './restDetails?item='+item
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.home {
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-content: flex-start;
		// justify-content: center;
		background-image: url(../../static/img/homeBackground.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 20upx;
		padding-top: 0upx;

		.top-box {
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			align-content: flex-start;
			align-items: center;
			background-color: #ffffff;
			border-top-left-radius: 60upx;
			border-top-right-radius: 60upx;
			margin-bottom: 10upx;

			.top-box-title {
				font-size: 32upx;
				line-height: 200%;
				color: #5b5b5b;
			}

			.top-box-contents {
				box-sizing: border-box;
				width: 100%;
				height: 320upx;
				padding: 20upx;
				border-top: 4upx dashed #f3f3f3;
				display: flex;
				justify-content: space-around;

				.top-box-content {
					box-sizing: border-box;
					width: 28%;
					height: 100%;
					padding: 15upx;
					background-color: #f8f8f8;
					text-align: center;
					font: normal 24upx/24upx Arial, Helvetica, sans-serif;
					color: #5b5b5b;
					line-height: 150%;
					border-radius: 10upx;
					border: 1px solid #f3f3f3;

					image {
						display: block;
						// box-sizing: border-box;
						// padding: 10upx;
						width: 160upx;
						height: 160upx;
					}
				}
			}
		}

		.bottom-box {
			box-sizing: border-box;
			width: 100%;
			height: auto;

			// display: flex;
			// flex-direction: column;
			// align-content: flex-start;
			// align-items: center;
			// border: 1px solid black;
			.bottom-title {
				height: 70upx;
				width: 100%;
				margin-bottom: 10upx;
				// border: 1px solid blue;
				background-color: #ffffff;
				box-sizing: border-box;
				padding-left: 40upx;
				padding-right: 40upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font: normal 32upx/32upx Arial, Helvetica, sans-serif;
				color: #4c4c4c;
			}

			.bottom-list {
				box-sizing: border-box;
				width: 100%;
				height: auto;
				// margin: 150upx;
				padding-left: 20upx;
				padding-right: 20upx;
				// border: 1px solid red;
			}
		}
	}
</style>
